// >>>>> 开关 <<<<<

.switch {
    appearance: none;
    width: 40px;
    padding: 2px;
    @apply select-none h-6 cursor-pointer outline-none relative flex items-center;

    &::before {
        content: '';
        height: 14px;
        transition: all .45s cubic-bezier(.23, 1, .32, 1);
        background-color: #bdbdbd;
        @apply block w-full rounded-full;
    }

    &::after {
        content: '';
        background-color: #fafafa;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
        transition: all .45s cubic-bezier(.23, 1, .32, 1);
        backface-visibility: hidden;
        @apply block absolute w-5 h-5~'top-0.5'rounded-full;
    }

    &:checked::before {
        background-color: rgba(32, 148, 243, .5);
    }

    &:checked::after {
        background-color: rgba(32, 148, 243, 1);
        transform: translate3d(16px, 0, 0);
    }
}